<template>
  <div>

    <div class="add appBox">
      <el-form ref="ruleFormRef"
               :model="ruleForm"
               status-icon
               :rules="rules"
               :label-width="$px2rem('100px')"
               label-position="left"
               class="demo-ruleForm">
        <div class="top flex_sb">
          <div class="flex left">
            <div class="cup flex"
                 @click="back">
              <el-icon size="18">
                <Back />
              </el-icon>
              <div class="ruturn">返回</div>
            </div>
            <div class="title">{{ boxTitle }}</div>
          </div>
          <div>
            <el-button v-preventReClick
                       type="primary"
                       @click="submit(ruleFormRef)">
              保 存
            </el-button>
          </div>
        </div>
        <div class="flex content">
          <div class="left">
            <div class="jbzl">基本资料</div>
            <div class="rzxx">认证信息</div>
          </div>
          <div class="right">
            <div class="formBox">
              <div class="top">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="企业简称"
                                  prop="shortName">
                      <el-input v-model="ruleForm.shortName"
                                @input="ruleForm.shortName = $input.inputLimit('D10006', ruleForm.shortName)"
                                placeholder="请填写企业简称"
                                clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="企业名称"
                                  prop="name">
                      <el-input v-model="ruleForm.name"
                                maxlength="20"
                                placeholder="请填写企业名称"
                                clearable />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label=" &nbsp; 企业行业"
                                  prop="">
                      <el-select v-model="ruleForm.sectorId"
                                 placeholder="请选择企业行业"
                                 :disabled="$route.query.status == 1"
                                 clearable>
                        <el-option v-for="i in optionsPre"
                                   :key="i"
                                   :label="i.dictValue"
                                   :value="i.id"></el-option>
                      </el-select> </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="企业规模"
                                  prop="scale">
                      <el-select v-model="ruleForm.scale"
                                 placeholder="请选择企业规模"
                                 :disabled="$route.query.status == 1"
                                 clearable>
                        <el-option :label="i.dictValue"
                                   :value="i.id"
                                   v-for="i in optionScale"
                                   :key="i" />

                      </el-select> </el-form-item></el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="所在地址"
                                  prop="addr">
                      <el-input v-model="ruleForm.addr"
                                :disabled="$route.query.status == 1"
                                @click="showMap"
                                @input="ruleForm.addr = $input.inputLimit('D10006', ruleForm.addr)"
                                class="m-2"
                                placeholder="请输入所在地址">
                      </el-input> </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="企业类型"
                                  prop="companyType">
                      <el-select v-model="ruleForm.companyType"
                                 :disabled="$route.query.status == 1"
                                 class="m-2"
                                 placeholder="请选择代招工企业">
                        <el-option :value="0"
                                   label="直属企业"></el-option>
                        <el-option :value="1"
                                   label="代招工企业"></el-option>
                      </el-select>

                    </el-form-item></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="联系人"
                                  prop="linkName">
                      <el-input v-model="ruleForm.linkName"
                                :disabled="$route.query.status == 1"
                                class="m-2"
                                @input="ruleForm.linkName = $input.inputLimit('D10006', ruleForm.linkName)"
                                placeholder="请输入联系人">
                      </el-input> </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="联系电话"
                                  prop="linkPhone">
                      <el-input v-model="ruleForm.linkPhone"
                                :disabled="$route.query.status == 1"
                                @input="ruleForm.linkPhone = $input.inputLimit('D10005', ruleForm.linkPhone)"
                                class="m-2"
                                placeholder="请输入联系电话">
                      </el-input> </el-form-item></el-col>
                </el-row>
                <el-row :gutter="20">

                  <el-col :span="12">
                    <el-form-item label="月休假天数"
                                  prop="vacation">
                      <el-input v-model="ruleForm.vacation"
                                :disabled="$route.query.status == 1"
                                placeholder="请输入月休假天数"
                                @input="ruleForm.vacation = $input.inputLimit('D10019', ruleForm.vacation)" />

                    </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="未到岗天数"
                                  prop="notWorkDays">
                      <el-input v-model="ruleForm.notWorkDays"
                                :disabled="$route.query.status == 1"
                                placeholder="请输入未到岗天数"
                                @input="ruleForm.notWorkDays = $input.inputLimit('D10019', ruleForm.notWorkDays)" />

                    </el-form-item></el-col>

                </el-row>
                <el-row :gutter="20">

                  <el-col :span="12">
                    <el-form-item label="&nbsp;&nbsp;企业LOGO"
                                  class="logosm"
                                  prop="">
                      <el-image v-if="$route.query.status == 1"
                                :src="ruleForm.logoImg[0]?.url"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                :initial-index="1"
                                :preview-src-list="[ruleForm.logoImg[0]?.url]"
                                fit="cover">
                        <template #error>
                          <div class="dsc flex_c">
                            待上传
                          </div>
                        </template>
                      </el-image>
                      <uploadImg :showNum="1"
                                 v-else
                                 :uploadImgList="ruleForm.logoImg"
                                 @changeUploadImgList="UploadLogo" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="可欠费天数"
                                  prop="debtDay">
                      <el-input v-model="ruleForm.debtDay"
                                :disabled="$route.query.status == 1"
                                placeholder="请输入可欠费天数"
                                @input="ruleForm.debtDay = $input.inputLimit('D10019', ruleForm.debtDay)" />

                    </el-form-item></el-col>
                </el-row>

              </div>
              <div class="bottom">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="营业执照"
                                  prop="license">
                      <el-image v-if="$route.query.status == 1"
                                :src="ruleForm.license[0]?.url"
                                :zoom-rate="1.2"
                                :max-scale="7"
                                :min-scale="0.2"
                                :initial-index="1"
                                :preview-src-list="[ruleForm.license[0]?.url]"
                                fit="cover">
                      </el-image>
                      <uploadImg :showNum="1"
                                 v-else
                                 :uploadImgList="ruleForm.license"
                                 @changeUploadImgList="UploadLicense" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="法人身份证正面"
                                  prop="idCard1">
                      <el-image v-if="$route.query.status == 1"
                                :src="ruleForm.idCard1[0]?.url"
                                :zoom-rate="1.2"
                                :preview-src-list="[ruleForm.idCard1[0]?.url]"
                                :max-scale="7"
                                :min-scale="0.2"
                                :initial-index="1"
                                fit="cover">
                      </el-image>
                      <uploadImg :showNum="1"
                                 v-else
                                 :uploadImgList="ruleForm.idCard1"
                                 @changeUploadImgList="UploadPermit" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="法人身份证反面"
                                  prop="idCard2">
                      <el-image v-if="$route.query.status == 1"
                                :src="ruleForm.idCard2[0]?.url"
                                :zoom-rate="1.2"
                                :preview-src-list="[ruleForm.idCard2[0]?.url]"
                                :max-scale="7"
                                :min-scale="0.2"
                                :initial-index="1"
                                fit="cover">
                      </el-image>
                      <uploadImg :showNum="1"
                                 v-else
                                 :uploadImgList="ruleForm.idCard2"
                                 @changeUploadImgList="UploadPermit2" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <chooseAddress ref="chooseAddress"
                     @mapData="mapData"
                     :type="mapType"></chooseAddress>
    </div>
  </div>
</template>

<script>
import chooseAddress from "@/components/map.vue";

import {
  defineComponent,
  onMounted,
  reactive,
  getCurrentInstance,
  ref,
  toRefs,
} from "vue";
import area from "@/utils/area.js";
import { useRouter, useRoute } from "vue-router";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
export default defineComponent({
  components: {
    chooseAddress,
  },
  setup () {
    const app = getCurrentInstance()?.proxy;
    const router = useRouter();
    const route = useRoute();
    const initState = () => {
      return {
        mapType: false,
        optionScale: JSON.parse(localStorage.getItem('staffSize')),
        optionsPre: [],
        boxTitle: "主体信息",
        props: {
          checkStrictly: true,
          label: "value",
          value: "value",
        },
        propsCity: [],
        ruleForm: {
          debtDay: '',
          vacation: '',
          notWorkDays: '',
          companyType: '',
          shortName: "", //企业简称
          name: "", //企业名称
          province: "", //省
          city: "", //市
          district: "", //区
          districtArr: [],
          addr: "", //所在地址
          linkName: '', //联系人
          linkPhone: '', //联系电话
          // @ApiModelProperty(value = "行业类型id")
          sectorId: "",
          // @ApiModelProperty(value = "行业类型名称")
          sectorName: "",
          // @ApiModelProperty(value = "企业规模")
          scale: "",
          // @ApiModelProperty(value = "企业LOGO")
          logoImg: "",
          // @ApiModelProperty(value = "营业执照")
          license: "",
          // @ApiModelProperty(value = "开户许可证")
          idCard1: "",
          idCard2: "",
        },
        rules: {
          shortName: [
            { required: true, message: "请输入企业简称", trigger: "blur" },
          ],
          vacation: [
            { required: true, message: "请输入月休假天数", trigger: "blur" },
          ],
          notWorkDays: [
            { required: true, message: "请输入未到岗天数", trigger: "blur" },
          ],
          debtDay: [
            { required: true, message: "请输入企业最大可欠费天数", trigger: "blur" },
          ],
          companyType: [
            { required: true, message: "请选择企业类型", trigger: "blur" },
          ],
          license: [
            { required: true, message: "请上传营业执照", trigger: "blur" },
          ],
          idCard1: [
            { required: true, message: "请上传法人身份证正面", trigger: "blur" },
          ],
          idCard2: [
            { required: true, message: "请上传法人身份证反面", trigger: "blur" },
          ],
          name: [
            { required: true, message: "请输入企业全称", trigger: "blur" },
          ],
          sectorId: [
            { required: true, message: "请选择企业行业", trigger: "blur" },
          ],
          scale: [
            { required: true, message: "请选择企业规模", trigger: "change" },
          ],
          districtArr: [
            { required: true, message: "请选择所在城市", trigger: "change" },
          ],
          linkName: [
            { required: true, message: "请输入联系人", trigger: "blur" },
          ],
          linkPhone: [
            { required: true, message: "请输入联系电话", trigger: "blur" },
          ],
          logoImg: [
            { required: true, message: "请上传企业logo", trigger: "blur" },
          ],
          addr: [
            { required: true, message: "请输入所在地址", trigger: "blur" },
          ],
        },
      };
    };
    const state = reactive(initState());
    onMounted(() => {
      state.optionsPre = JSON.parse(localStorage.getItem("profession"));
      state.propsCity = area;
      if (route.query.id) {
        methods.getData(route.query.id);
        state.boxTitle = "编辑主体信息";
      } else {
        app.$get('sysconfig/getPlatVacationConfig?key=vacation').then(res => {
          if (res.data && res.code == 200) {
            state.ruleForm.vacation = res.data
          }
        })
        app.$get('sysconfig/getPlatVacationConfig?key=notWorkDays').then(res => {
          if (res.data && res.code == 200) {
            state.ruleForm.notWorkDays = res.data
          }
        })
        app.$get('sysconfig/getPlatVacationConfig?key=debtDay').then(res => {
          if (res.data && res.code == 200) {
            state.ruleForm.debtDay = res.data
          }
        })
      }
    });
    const methods = {
      mapData (data, type) {
        console.log(data, '城市选择');
        state.ruleForm.addr = data.name;
        state.ruleForm.longitude = data.lng;
        state.ruleForm.latitude = data.lat;
        state.ruleForm.city = data.city;
        state.ruleForm.district = data.district;
        state.ruleForm.province = data.province;
        return;
      },
      showMap (type) {
        state.mapType = type;
        if (state.ruleForm.longitude && state.ruleForm.latitude) {
          app.$refs.chooseAddress.mapCenter = [state.ruleForm.longitude, state.ruleForm.latitude]
        }
        app.$refs.chooseAddress.dialogVisible = true;
        app.$refs.chooseAddress.initMap();
      },
      getData (id) {
        app.$http.get("/company/getById?id=" + id).then((res) => {
          res.data.logoImg = JSON.parse(res.data.logoImg);
          res.data.license = JSON.parse(res.data.license);
          res.data.idCard1 = JSON.parse(res.data.idCard1);
          res.data.idCard2 = JSON.parse(res.data.idCard2);
          res.data.districtArr = [
            res.data.province,
            res.data.city,
            res.data.district,
          ];
          if (res.data) {
            state.ruleForm = Object.assign(state.ruleForm, res.data);
          }
        });
      },

      back () {
        router.go(-1);
      },
      submit () {

        app.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            const loading = ElLoading.service({
              text: "努力加载中",
            });
            let url = "/company/add";
            if (route.query.id) {
              url = "/company/update";
            }
            let data = JSON.parse(JSON.stringify(state.ruleForm));
            data.logoImg = JSON.stringify(data.logoImg);
            data.license = JSON.stringify(data.license);
            data.idCard1 = JSON.stringify(data.idCard1);
            data.idCard2 = JSON.stringify(data.idCard2);
            app.$http
              .post(url, data)
              .then((res) => {
                if (res.code == 200) {
                  ElMessage({
                    message: "成功保存",
                    type: "success",
                  });
                  router.go(-1);
                }
                loading.close();
              })
              .catch(() => {
                loading.close();
              });
          }
        });
      },
      // 企业glogo
      UploadLogo (data) {
        state.ruleForm.logoImg = data;
      },
      // 营业执照
      UploadLicense (data) {
        state.ruleForm.license = data;
      },
      // 营业执照
      UploadPermit (data) {
        state.ruleForm.idCard1 = data;
      },
      // 营业执照
      UploadPermit2 (data) {
        state.ruleForm.idCard2 = data;
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped>
.dsc {
  width: 100px;
  color: #a8abb2;
  background: #f5f7fa;
  height: 100px;
}
.demo-ruleForm {
  overflow: auto;
}
.add {
  .bottom {
    ::v-deep(.el-image) {
      width: 160px !important;
      height: 100px !important;
    }
    ::v-deep(.el-upload) {
      width: 160px !important;
    }
  }
  .demo-ruleForm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .top {
    .ruturn {
      color: rgba(121, 121, 121, 1);
      font-size: 16px;
      position: relative;
      margin-left: 10px;
      margin-top: -2px;
    }
    .ruturn::before {
      content: '';
      position: absolute;
      left: 50px;
      top: 4px;
      width: 1px;
      height: 16px;
      background: rgba(121, 121, 121, 0.8);
    }
    .left {
      align-items: center;
    }
    .title {
      color: rgb(83, 83, 83);
      font-size: 16px;
      margin-left: 40px;
      font-weight: bold;
    }
  }
  .content {
    width: 100%;
    margin-top: 20px;
    height: 100%;
    flex: 1;
    .left {
      width: 360px;
      height: 100%;
      display: flex;
      flex-direction: column;
      color: rgb(174, 174, 178);
      font-size: 16px;
      .jbzl {
        background-color: rgba(242, 242, 247, 0.33);
        border-radius: 5px;
        height: 446px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .rzxx {
        margin-top: 16px;
        background-color: rgba(242, 242, 247, 0.33);
        border-radius: 5px;
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .el-image {
      width: 100px;
      height: 100px;
    }
    .right {
      flex: 1;
      margin-left: 18px;
      .logosm {
        ::v-deep(.el-form-item__label::after) {
          content: '130*130 像素';
          color: #969696;
          position: absolute;
          font-size: 12px;
          top: 24px;
          left: 20px;
        }
      }
      .formBox {
        display: flex;
        height: 100%;
        flex-direction: column;
        .top {
          background-color: rgba(242, 242, 247, 0.33);
          border-radius: 5px;
          height: 446px;
          width: 100%;
          padding: 24px;
        }
        .bottom {
          padding: 24px;
          margin-top: 16px;
          background-color: rgba(242, 242, 247, 0.33);
          border-radius: 5px;
          width: 100%;
          flex: 1;
        }
        .workimgtitle {
          color: #969696;
          font-size: 14px;
        }
        ::v-deep(.el-row) {
          margin-bottom: 10px;
        }
        .addImg {
          width: 100px;
          height: 100px;
          margin-left: 100px;
          border-radius: 2px;
          text-align: center;
          line-height: 100px;
          font-size: 26px;
          cursor: pointer;
          background-color: rgba(255, 255, 255, 1);
        }
      }
    }
    ::v-deep(.el-select) {
      width: 100%;
    }
  }
}
</style>
